<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/header.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/footer.css" media="screen" title="no title" charset="utf-8">
<style type="text/css">
/*.header{
	margin-bottom: 0;
	background: rgb(250,250,250);
}*/
.footer{
	width: 100%;
	background: rgb(250,250,250);
	padding-top:5px;
}

body,div,h2,h3,ul,li,p{
	margin:0;
	padding:0;
 }
a{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
}
ul{
	list-style-type:none;
}
body{
	color:#333;
	background:url('source/images/forumBG.jpg');
	background-size: cover;
	background-attachment: fixed;
	font:12px/1.5 \5b8b\4f53;
}
#msgBox{
	width:1000px;
	background:#fff;
	border-radius:5px;
	margin:10px auto;
	padding-top:10px;
}
#msgBox form h2{
	font-weight:400;
	font:400 18px/1.5 \5fae\8f6f\96c5\9ed1;
}
#msgBox form{
	/*background:url(source/img/boxBG.jpg) repeat-x 0 bottom;*/
	padding:0 20px 15px;
}
#conBox{
	width:100%;
	resize:none;
	height:65px;
	overflow:auto;
}
#msgBox form div{
	position:relative;
	color:#999;
	margin-top:10px;
}
#msgBox img{
	border-radius:3px;
}
#face{
	position:absolute;
	top:0;left:100px;
}
#face img{
	width:30px;
	height:30px;
	cursor:pointer;
	margin-right:6px;
	opacity:0.5;
	filter:alpha(opacity=50);
}
#face img.hover,#face img.current{
	width:28px;
	height:28px;
	border:1px solid #f60;
	opacity:1;
	filter:alpha(opacity=100);
}
#sendBtn{
	border:0;
	width:112px;
	height:30px;
	cursor:pointer;
	margin-left:10px;
	background:url(source/img/btn.png) no-repeat;
}
#sendBtn.hover{
	background-position:0 -30px;
}
#msgBox form .maxNum{
	font:26px/30px Georgia, Tahoma, Arial;
	padding:0 5px;
}
#msgBox .list{
	padding:10px;
}
#msgBox .list h3{
	position:relative;
	height:33px;
	font-size:14px;
	font-weight:400;
	background:#e3eaec;
	border:1px solid #dee4e7;
}
#msgBox .list h3 span{
	position:absolute;
	left:6px;
	top:6px;
	background:#fff;
	line-height:28px;
	display:inline-block;
	padding:0 15px;
}
#msgBox .list ul{
	overflow:hidden;
	zoom:1;
}
#msgBox .list ul li{
	float:left;
	clear:both;
	width:100%;
	border-bottom:1px dashed #d8d8d8;
	padding:10px 0;
	background:#fff;
	overflow:hidden;
}
#msgBox .list ul li.hover{
	background:#f5f5f5;
}
#msgBox .list .userPic{
	float:left;
	width:50px;
	height:50px;
	display:inline;
	margin-left:10px;
	border:1px solid #ccc;
	border-radius:3px;
}
#msgBox .list .content{
	float:left;
	width:900px;
	font-size:14px;
	margin-left:10px;
	font-family:arial;
	word-wrap:break-word;
}
#msgBox .list .userName{
	display:inline;
	padding-right:5px;
}
#msgBox .list .userName a{
	color:#2b4a78;
}

#msgBox .list .msgInfo{
	display:inline;
	word-wrap:break-word;
}
#msgBox .list .times{
	color:#889db6;
	font:12px/18px arial;
	margin-top:5px;
	overflow:hidden;
	zoom:1;
}
#msgBox .list .times span{
	float:left;
}
#msgBox .list .times a{
	float:right;
	color:#889db6;
	display:none;
}
.tr{
	overflow:hidden;
	zoom:1;
}
.tr p{
	float:right;
	line-height:30px;
}
.tr *{
	float:left;
}
</style>

<title>留言板</title>
</head>
<body>
	<div class="header">
			<div class="head">
					<ul class="firstHead">
							<li><a href="index.html" target="_blank">波奇首页</a></li>
							<li><a href="shop.html" target="_blank">波奇商城</a></li>
							<li><a href="serve.html" target="_blank">波奇服务</a></li>
							<li><a href="message.html" target="_blank">波奇论坛</a></li>
							<li><a href="cyclopedia.html" target="_blank">宠物百科</a></li>
					</ul>
					<ul class="attention">
							<li><a href="#">关注我们<span><img src="" alt="" /></span></a></li>
							<li><a href="#">帮助中心</a></li>
							<li><a href="#"><span><img src="" alt="" /></span>收藏</a></li>
					</ul>
					<ul class="register">
							<li><a href="login.html" target="_blank">登陆</a></li>
							<li><a href="script:;">|</a></li>
							<li><a href="register.html" target="_blank">免费注册</a></li>
					</ul>
					<ul class="userLogin">
							<li>
									<a href="script:;" id="userName"></a>
							</li>
							<li>|</li>
							<li><a href="script:;" id="quit">退出</a></li>
					</ul>

			</div>
	</div>
<div id="msgBox">
    <form>
        <h2>来 吐槽一下，自家的萌宠吧！</h2>

        <div>
            <span style="font-size:18px;">选择图像</span>
            <p id="face"><img src="source/img/face1.gif" class="current" /><img src="source/img/face2.gif" /><img src="source/img/face3.gif" /><img src="source/img/face4.gif" /><img src="source/img/face5.gif" /><img src="source/img/face6.gif" /><img src="source/img/face7.gif" /><img src="source/img/face8.gif" /></p>
        </div>
        <div><textarea id="conBox" class="f-text"></textarea></div>
        <div class="tr">
            <p>
                <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>

                <input id="sendBtn" type="button" value="" title="快捷键 Ctrl+Enter" />
            </p>
        </div>
    </form>
    <div class="list">
        <h3><span>大家在说</span></h3>
        <ul>


        </ul>
    </div>
</div>
<div class="footer">
		<ul>
				<li><a href="#">关于我们</a></li>|
				<li><a href="#">友情链接</a></li>|
				<li><a href="#">诚聘英才</a></li>|
				<li><a href="#">联系我们</a></li>|
				<li><a href="#">网站地图</a></li>|
				<li><a href="#">意见反馈</a></li>|
				<li><a href="#">帮助中心</a></li>|
				<li><a href="#">客服热线：123456789</a></li>
		</ul>
		<p>
				Copyright © 2007-2016 Boqii.com All Rights Reserved 光橙（上海）信息科技有限公司 版权所有 沪ICP备13034501号-2 增值电信业务经营许可证：沪B2-20140120
		</p>
</div>
</body>
</html>
<script type="text/javascript">
		var register = document.getElementsByClassName("register")[0];
		var userLogin =document.getElementsByClassName("userLogin")[0];
		var userName = document.getElementById("userName");
		var quit = document.getElementById("quit");
		var storage = window.localStorage;
		var user= storage.user;
		console.log(user);
		readStorage();
		setInterval(readStorage,2000);
		//读取storage的数据
		function readStorage(){

		  var storage = window.localStorage;
		  if (typeof(storage["user"])=='undefined') {
		    register.style.display ="inline-block";
		    userLogin.style.display = "none";
		     return false;
		  }else if(storage["user"]==""){

		    register.style.display ="inline-block";
		    userLogin.style.display = "none";
		     return false;
		  }else {
		    var myDate =  new Date();
		    var currenTime = myDate.getTime();
		    if (currenTime >= Number(storage["userTime"])+3600000) {
		      storage["user"] ="";
		    }else {
		        register.style.display ="none";
		        userLogin.style.display = "inline-block";
		        userName.innerText = storage["user"];
						user = storage["user"];
		    }

		  }
		}
		quit.onclick = function (){
		  var storage = window.localStorage;
		  register.style.display ="inline-block";
		  userLogin.style.display = "none";
		  storage["user"] = "";
		}


/*-------------------------- +
  获取id, class, tagName
 +-------------------------- */
var get = {
	byId: function(id) {
		return typeof id === "string" ? document.getElementById(id) : id
	},
	byClass: function(sClass, oParent) {
		var aClass = [];
		var reClass = new RegExp("(^| )" + sClass + "( |$)");
		var aElem = this.byTagName("*", oParent);
		for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
		return aClass
	},
	byTagName: function(elem, obj) {
		return (obj || document).getElementsByTagName(elem)
	}
};
/*-------------------------- +
  事件绑定, 删除
 +-------------------------- */
var EventUtil = {
	addHandler: function (oElement, sEvent, fnHandler) {
		oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : (oElement["_" + sEvent + fnHandler] = fnHandler, oElement[sEvent + fnHandler] = function () {oElement["_" + sEvent + fnHandler]()}, oElement.attachEvent("on" + sEvent, oElement[sEvent + fnHandler]))
	},
	removeHandler: function (oElement, sEvent, fnHandler) {
		oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, oElement[sEvent + fnHandler])
	},
	addLoadHandler: function (fnHandler) {
		this.addHandler(window, "load", fnHandler)
	}
};
/*-------------------------- +
  设置css样式
  读取css样式
 +-------------------------- */
function css(obj, attr, value)
{
	switch (arguments.length)
	{
		case 2:
			if(typeof arguments[1] == "object")
			{
				for (var i in attr) i == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + attr[i] + ")", obj.style[i] = attr[i] / 100) : obj.style[i] = attr[i];
			}
			else
			{
				return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
			}
			break;
		case 3:
			attr == "opacity" ? (obj.style["filter"] = "alpha(opacity=" + value + ")", obj.style[attr] = value / 100) : obj.style[attr] = value;
			break;
	}
};

EventUtil.addLoadHandler(function ()
{
	var oMsgBox = get.byId("msgBox");
	var oUserName = get.byId("userName");
	var oConBox = get.byId("conBox");
	var oSendBtn = get.byId("sendBtn");
	var oMaxNum = get.byClass("maxNum")[0];
	var oCountTxt = get.byClass("countTxt")[0];
	var oList = get.byClass("list")[0];
	var oUl = get.byTagName("ul", oList)[0];
	var aLi = get.byTagName("li", oList);
	var aFtxt = get.byClass("f-text", oMsgBox);
	var aImg = get.byTagName("img", get.byId("face"));
	var bSend = false;
	var timer = null;
	var oTmp = "";
	var i = 0;
	var maxNum = 140;

	//禁止表单提交
	EventUtil.addHandler(get.byTagName("form", oMsgBox)[0], "submit", function () {return false});

	//为广播按钮绑定发送事件
	EventUtil.addHandler(oSendBtn, "click", fnSend);

	//为Ctrl+Enter快捷键绑定发送事件
	EventUtil.addHandler(document, "keyup", function(event)
	{
		console.log(event);
		var event = event || window.event;
		event.ctrlKey && event.keyCode == 13 && fnSend()
	});

	//请求留言数据
	var XMLHttp
	if (window.ActiveXObject) {
		XMLHttp = new ActiveXObject('Microsoft.XMLHTTP');
	}else{
		XMLHttp = new XMLHttpRequest();
	}
	var url = "php/message.php"
	console.log(url);
XMLHttp.open('get',url,true);
XMLHttp.send(null);
XMLHttp.onreadystatechange = function () {
	if (XMLHttp.readyState == 4) {
		if (XMLHttp.status == 200) {
			obj = JSON.parse(XMLHttp.response);
			for (var i = 0; i < obj.length; i++) {
				objbody = JSON.parse(obj[i]);

			var oLi = document.createElement("li");
			var oDate = new Date();
			oLi.innerHTML = "<div class=\"userPic\"><img src=\"" +objbody.src + "\"></div>\
							 <div class=\"content\">\
							 	<div class=\"userName\"><a href=\"javascript:;\">" + objbody.user + "</a>:</div>\
								<div class=\"msgInfo\">" + objbody.message + "</div>\
								<div class=\"times\"><span>" + objbody.date+ "</span></div></div>";
			//插入元素
			aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);
			}
		}
	}
}
	//发送广播函数
	function fnSend ()
	{
		var reg = /^\s*$/g;
		user = storage["user"];
		if(!user)
		{
			window.open('login.html');
		}
		// else if(!/^[u4e00-\u9fa5\w]{2,8}$/g.test(oUserName.value))
		// {
		// 	alert("\u59d3\u540d\u75312-8\u4f4d\u5b57\u6bcd\u3001\u6570\u5b57\u3001\u4e0b\u5212\u7ebf\u3001\u6c49\u5b57\u7ec4\u6210\uff01");
		// 	oUserName.focus()
		// }
		else if(reg.test(oConBox.value))
		{
			alert("\u968f\u4fbf\u8bf4\u70b9\u4ec0\u4e48\u5427\uff01");
			oConBox.focus()
		}
		else if(!bSend)
		{
			alert("\u4f60\u8f93\u5165\u7684\u5185\u5bb9\u5df2\u8d85\u51fa\u9650\u5236\uff0c\u8bf7\u68c0\u67e5\uff01");
			oConBox.focus()
		}
		else
		{
			var oLi = document.createElement("li");
			var oDate = new Date();
			oLi.innerHTML = "<div class=\"userPic\"><img src=\"" + get.byClass("current", get.byId("face"))[0].src + "\"></div>\
							 <div class=\"content\">\
							 	<div class=\"userName\"><a href=\"javascript:;\">" + user + "</a>:</div>\
								<div class=\"msgInfo\">" + oConBox.value.replace(/<[^>]*>|&nbsp;/ig, "") + "</div>\
								<div class=\"times\"><span>" + format(oDate.getMonth() + 1) + "\u6708" + format(oDate.getDate()) + "\u65e5 " + format(oDate.getHours()) + ":" + format(oDate.getMinutes()) + "</span></div></div>";
			//插入元素
			aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);

			// 存入数据库

		    var url = "php/message.php?user="+user+"&src="+get.byClass("current", get.byId("face"))[0].src +"&message="+oConBox.value.replace(/<[^>]*>|&nbsp;/ig, "")+"&date="+format(oDate.getMonth() + 1) + "\u6708" + format(oDate.getDate()) + "\u65e5 " + format(oDate.getHours()) + ":" + format(oDate.getMinutes());
		    console.log(url);
		  XMLHttp.open('get',url,true);
		  XMLHttp.send(null);
		  XMLHttp.onreadystatechange = function () {
		    if (XMLHttp.readyState == 4) {
		      if (XMLHttp.status == 200) {
						console.log(XMLHttp.response);
					}
				}
			}

			//重置表单
			get.byTagName("form", oMsgBox)[0].reset();
			for (i = 0; i < aImg.length; i++) aImg[i].className = "";
			aImg[0].className = "current";

			//将元素高度保存
			var iHeight = oLi.clientHeight - parseFloat(css(oLi, "paddingTop")) - parseFloat(css(oLi, "paddingBottom"));
			var alpah = count = 0;
			css(oLi, {"opacity" : "0", "height" : "0"});
			timer = setInterval(function ()
			{
				css(oLi, {"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
				if (count > iHeight)
				{
					clearInterval(timer);
					css(oLi, "height", iHeight + "px");
					timer = setInterval(function ()
					{
						css(oLi, "opacity", (alpah += 10));
						alpah > 100 && (clearInterval(timer), css(oLi, "opacity", 100))
					},30)
				}
			},30);
			//调用鼠标划过/离开样式
			liHover();
			//调用删除函数
			delLi()
		}
	};

	//事件绑定, 判断字符输入
	EventUtil.addHandler(oConBox, "keyup", confine);
	EventUtil.addHandler(oConBox, "focus", confine);
	EventUtil.addHandler(oConBox, "change", confine);

	//输入字符限制
	function confine ()
	{
		var iLen = 0;
		for (i = 0; i < oConBox.value.length; i++) iLen += /[^\x00-\xff]/g.test(oConBox.value.charAt(i)) ? 1 : 0.5;
		oMaxNum.innerHTML = Math.abs(maxNum - Math.floor(iLen));
		maxNum - Math.floor(iLen) >= 0 ? (css(oMaxNum, "color", ""), oCountTxt.innerHTML = "\u8fd8\u80fd\u8f93\u5165", bSend = true) : (css(oMaxNum, "color", "#f60"), oCountTxt.innerHTML = "\u5df2\u8d85\u51fa", bSend = false)
	}
	//加载即调用
	confine();

	//广播按钮鼠标划过样式
	EventUtil.addHandler(oSendBtn, "mouseover", function () {this.className = "hover"});

	//广播按钮鼠标离开样式
	EventUtil.addHandler(oSendBtn, "mouseout", function () {this.className = ""});

	//li鼠标划过/离开处理函数
	function liHover()
	{
		for (i = 0; i < aLi.length; i++)
		{
			//li鼠标划过样式
			EventUtil.addHandler(aLi[i], "mouseover", function (event)
			{
				this.className = "hover";
				oTmp = get.byClass("times", this)[0];
				var aA = get.byTagName("a", oTmp);
				if (!aA.length)
				{
					var oA = document.createElement("a");
					oA.innerHTML = "删除";
					oA.className = "del";
					oA.href = "javascript:;";
					oTmp.appendChild(oA)
				}
				else
				{
					aA[0].style.display = "block";
				}
			});

			//li鼠标离开样式
			EventUtil.addHandler(aLi[i], "mouseout", function ()
			{
				this.className = "";
				var oA = get.byTagName("a", get.byClass("times", this)[0])[0];
				oA.style.display = "none"
			})
		}
	}
	liHover();

	//删除功能
	function delLi()
	{
		var aA = get.byClass("del", oUl);

		for (i = 0; i < aA.length; i++)
		{
			aA[i].onclick = function ()
			{
				var oParent = this.parentNode.parentNode.parentNode;
				var alpha = 100;
				var iHeight = oParent.offsetHeight;
				timer = setInterval(function ()
				{
					css(oParent, "opacity", (alpha -= 10));
					if (alpha < 0)
					{
						clearInterval(timer);
						timer = setInterval(function ()
						{
							iHeight -= 10;
							iHeight < 0 && (iHeight = 0);
							css(oParent, "height", iHeight + "px");
							iHeight == 0 && (clearInterval(timer), oUl.removeChild(oParent))
						},30)
					}
				},30);
				this.onclick = null
			}
		}
	}
	delLi();

	//输入框获取焦点时样式
	for (i = 0; i < aFtxt.length; i++)
	{
		EventUtil.addHandler(aFtxt[i], "focus", function ()	{this.className = "active"});
		EventUtil.addHandler(aFtxt[i], "blur", function () {this.className = ""})
	}

	//格式化时间, 如果为一位数时补0
	function format(str)
	{
		return str.toString().replace(/^(\d)$/,"0$1")
	}

	//头像
	for (i = 0; i < aImg.length; i++)
	{
		aImg[i].onmouseover = function ()
		{
			this.className += " hover"
		};
		aImg[i].onmouseout = function ()
		{
			this.className = this.className.replace(/\s?hover/,"")
		};
		aImg[i].onclick = function ()
		{
			for (i = 0; i < aImg.length; i++) aImg[i].className = "";
			this.className = "current"
		}
	}
});
</script>
